<template>
  <div class="root">
    <!-- 角色设置 -->
    <div class="left-part">
      <p>角色设置</p>
      <div class="role-title">
        <template v-for="(item, index) in roles">
          <p
            :key="index"
            :class="item.isCheck ? 'p-checked' : 'p-notcheck'"
            @click="checkFn(index, 'roles')"
          >
            {{ item.title }}
          </p>
        </template>
      </div>
      <div class="btn-group">
        <template v-for="(item, index) in btns">
          <Button
            :key="index"
            style=""
            :type="item.isCheck ? 'primary' : 'default'"
            @click="checkFn(index, 'btns')"
          >
            {{ item.title }}
          </Button>
        </template>
      </div>
      <div style="width:80%;margin:10px  auto">
        <template v-for="(item, index) in pList">
          <div :key="index" class="role-p" @click="chooseRole(index)">
            <p>{{ item.name }} ({{ item.num }}人)</p>
            <p><span>编辑</span><span>删除</span></p>
          </div>
        </template>
      </div>
    </div>
    <!-- 右侧详细设置 -->
    <div class="right-part">
      <div class="submit-btn">
        <Button type="primary">保存</Button>
        <Button>返回</Button>
      </div>
      <div class="right-content">
        <p>设计经理(5人)</p>
        <div class="promission-title">
          <template v-for="(item, index) in promissionL">
            <p
              :key="index"
              :class="item.isCheck ? 'p-checked' : 'p-notcheck'"
              @click="checkFn(index, 'promissionL')"
            >
              {{ item.title }}
            </p>
          </template>
        </div>
        <div style="clear:both">
          <template>
            <div
              style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"
            >
              <Checkbox>全选</Checkbox>
              <Checkbox>首页</Checkbox>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CountTo from '_c/count-to';
export default {
  name: 'count_to_page',
  components: {
    CountTo
  },
  data () {
    return {
      roles: [
        { title: '功能角色', isCheck: true },
        { title: '数据角色', isCheck: false }
      ],
      btns: [
        { title: '添加角色', isCheck: true },
        { title: '复制角色', isCheck: false }
      ],
      promissionL: [
        { title: '权限设置', isCheck: true },
        { title: '所属人员', isCheck: false }
      ],
      pList: [
        { name: '设计经理', num: 10 },
        { name: '施工人员', num: 5 },
        { name: '检验人员', num: 4 },
        { name: '审批人员', num: 1 }
      ],
      dList: [
        { name: '超级管理员' },
        { name: '普通管理员' },
        { name: '普通用户' }
      ],
      checkAll: false
    };
  },
  methods: {
    checkFn (tagIndex, type) {
      console.log('type', type);
      console.log('this.type', this[type]);
      this[type].forEach((item, index) => {
        if (tagIndex === index) {
          item.isCheck = item.isCheck == true ? true : !item.isCheck;

          //   item.isCheck = !item.isCheck; // 取反
        } else {
          item.isCheck = false;
        }
      });
    },
    // changeList(type){
    //     if(type=='fun'){
    //         this.pList = this.dList;
    //     }else if(type=='fun'){

    //     }
    // },
    chooseRole () {}
  },

  mounted () {}
};
</script>

<style lang="less">
.root {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  height: 100%;
  .left-part {
    width: 20%;
    height: 100%;
    background: pink;
    .role-title {
      width: 80%;
      margin: 10px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        width: 50%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #8f8f8f;
        color: #8f8f8f;
      }
      p:hover {
        cursor: pointer;
      }
      .p-checked {
        border-bottom: 2px solid #4319fc;
        color: #4319fc;
      }
      .p-notcheck {
        border-bottom: 1px solid #8f8f8f;
        color: #8f8f8f;
      }
    }
    .btn-group {
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
    }
    .role-p {
      height: 30px;
      line-height: 30px;
      display: flex;
      p:nth-child(1){
          width: 70%;
      }
      p:nth-child(2){
          width: 30%;
          display: flex;
          justify-content: space-around;
          color: #4319fc;
      }
    }
    .role-p:hover {
      cursor: pointer;
      background: #eee000;
    }
  }
  .right-part {
    width: 80%;
    height: 100%;
    background: goldenrod;
    .submit-btn {
      float: right;
      button {
        margin: 0 8px 20px;
      }
    }
    .right-content {
      clear: both;
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      .promission-title {
        height: 100%;
        width: 20%;
        float: left;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 20px;
        p {
          width: 50%;
          text-align: center;
          height: 40px;
          line-height: 40px;
          border-bottom: 1px solid #8f8f8f;
          color: #8f8f8f;
        }
        p:hover {
          cursor: pointer;
        }
        .p-checked {
          border-bottom: 2px solid #4319fc;
          color: #4319fc;
        }
        .p-notcheck {
          border-bottom: 1px solid #8f8f8f;
          color: #8f8f8f;
        }
      }
    }
  }
}
</style>
